<template>
    <el-dialog title="项目采购明细" :visible.sync="pdShow" @close = "closeDialog">

<el-form :model="pdForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline = "true">
<!-- <el-form-item>
<span>采购申请基本信息</span>
<el-button type="primary" @click="submitForm">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</el-form-item> -->

<div style="display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; padding: 0 12px;">
<span style="font-size: 16px; font-weight: bold;">采购明细信息</span>
<div >
  <el-button type="primary" @click="submitForm">确定</el-button>
  <!-- <el-button @click="closeDialog">取消</el-button> -->
</div>
</div>

<br>
<el-form-item label="采购类别">
    <el-select v-model="pdForm.ptid" placeholder="请选择产品类别"  filterable @change="getptid" style="width: 205px;">
              <el-option v-for="pt in ptList" :label="pt.ptName" :value="pt.ptid" :key="pt.ptid"></el-option>
            </el-select>
</el-form-item>
<el-form-item label="产品名称" prop="pdName">
<el-input  v-model="pdForm.pdName" style="width: 205px;"></el-input>
</el-form-item>
<br>
<el-form-item label="供应商信息" prop="sID">
    <el-select v-model="pdForm.sID" placeholder="请先选择产品类别" clearable="true" filterable  style="width: 205px;">
              <el-option v-for="s in supList" :label="s.sname" :value="s.sid" :key="s.sid"></el-option>
            </el-select>
</el-form-item>
<el-form-item label="单位" prop="unit">
<el-input v-model="pdForm.unit"></el-input>
</el-form-item>
<br>
<el-form-item label="数量">
    <el-input v-model="pdForm.number" type="number" min="0"></el-input>
</el-form-item>
<el-form-item label="单价">
<el-input v-model="pdForm.price" type="number" min="0"></el-input>
</el-form-item>
<br>
</el-form>
</el-dialog>
</template>

<script>
export default {
    name:'proDEtailInfo',
    props:{
        pdShow:Boolean,
        thePrNum:String
    },
    data(){
        return{
            pdForm:{
                prNum:'',
                pdName:'',
                sID:null,
                number:0,
                price:0,
                unit:'',
                ptid:0
            },
            ptList:[],
            supList:[],
            pdidList:[],
            rules: {
                 sID: [
                      { required: true, message: '请选择供应商', trigger: 'blur' },
                     //  { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                 pdName: [
                     { required: true, message: '请输入产品名称', trigger: 'blur' },
                    //  { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                 ],
                 unit: [
                     { required: true, message: '请输入计量单位', trigger: 'blur' },
                    //  { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                 ],
            }
        }
    },
    methods:{
        submitForm(){
          this.$refs['ruleForm'].validate((valid) => {
            //valid代表验证结果
            if (valid) {//true代表校验通过，可以将数据提交给后台
                this.$http.post("/addPd",this.pdForm).then(res =>{
                    debugger
                    if(res.data.message === 'success'){
                        this.$emit('pdSave',res.data)
                        this.pdidList.push(res.data.pdid)                     
                    } else{
                        this.$message.error("服务器错误")
                    }
                })
            } 
        });
        },
        closeDialog(){
            //重置数据并关闭弹框
            // this.proForm = {
            //     empno:0,
            //     ename:'',
            //     sex:'男',
            //     job:'',
            //     hiredate:'',
            //     deptno:1
            // }
            // this.dialogFormVisible = false
            // pdForm = {
            //     prNum:'',
            //     pdName:'',
            //     sID:0,
            //     number:0,
            //     price:0,
            //     unit:'',
            //     ptid:0
            // }
            //告诉父组件弹窗关闭，让父组件设置isShow为false
            
            // this.dialogFormVisible = false
            this.$emit('closeDialog')
            this.$refs['ruleForm'].resetFields();
            //重置验证信息
            
        },
        getProType(){
          this.$http.post("/getPt").then(res => {
          console.log(res)
          this.pdForm.prNum = this.thePrNum
          this.ptList = res.data
          if (this.ptList.length > 0) {
            this.pdForm.ptid = this.ptList[0].ptid;
           }
           this.getSupplier()
        })
        },
        getSupplier(){
            if(this.pdForm.ptid == 0){
                this.$message.error('请先选择产品类别')
            }
          this.$http.post("/getSupplier/" + this.pdForm.ptid).then(res => {
          console.log("供应商信息为：" + res.data)
          this.supList = res.data
        })
        },
        getptid(){
            this.getSupplier()
            console.log("供应商信息：" + this.supList)
            console.log('ptid值为：' + this.pdForm.ptid)
        },
        // checkPt(){
        //     if(this.pdForm.ptid == 0){

        //     }
        // }
    },
    watch:{
        pdShow(val){
            //val代表父组件传递的新的isShow值
            this.dialogFormVisible = val
            this.getProType()
        },
        //  proInfo:{
        //      handler(val){
        //          将父组件要修改的员工信息赋值给当前表单绑定的empForm对象
        //           this.proForm = {...val}
        //      },
        //  }
    }
}
</script>

<style>

</style>